<template>
  <Card :bordered="false" dis-hover>
    <Row :gutter="12" class="ivu-mb-16">
      <Col :span="6">
        <Input
          placeholder="请输入搜索医生名称"
          v-model="params.name"
          clearable
          @on-clear="askData"
          @on-enter="askData"
        />
      </Col>
      <Col :span="4">
        <Select
          placeholder="类别"
          width="118"
          v-model="params.type"
          clearable
          @on-change="askData"
        >
          <Option
            v-for="(item, index) in doctorType"
            :key="index"
            :value="index"
            >{{ item }}</Option
          >
        </Select>
      </Col>
      <Col :span="4">
        <Select
          placeholder="状态"
          v-model="params.leave_type"
          clearable
          @on-change="askData"
        >
          <Option
            v-for="(item, index) in leaveType"
            :key="index"
            :value="index"
            >{{ item }}</Option
          >
        </Select>
      </Col>
      <Col class="ivu-fr" :span="2" offset="8">
        <Button
          type="primary"
          v-hasC="{
            name: 'v1-doctor-list-create',
            flag: 'v1/doctor/list/create',
          }"
          @click="handleAdd"
          >新增</Button
        >
      </Col>
    </Row>
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      @on-sort-change="sortChange"
    >
      <template #image="{ row }">
        <img :src="row.image" />
      </template>
      <template #status="{ row }">
        <Badge v-if="row.leave_type == 1" status="success" text="在院" />
        <Badge v-if="row.leave_type == 2" status="error" text="离院" />
      </template>
      <template #type="{ row }">
        <b v-if="row.type == 2">特邀专家</b>
        <b v-else>本院医生</b>
      </template>
      <template #registerType="{ row }">
        <b v-if="row.register_type == 2">专家号</b>
        <b v-else>普通号</b>
      </template>
      <template #action="{ row }">
        <a
          @click="handleEdit(row)"
          v-hasC="{ name: 'v1-doctor-list-edit', flag: 'v1/doctor/list/edit' }"
          >编辑</a
        >
        <Divider
          type="vertical"
          v-hasC="{ name: 'v1-doctor-list-edit', flag: 'v1/doctor/list/edit' }"
        ></Divider>
        <a
          @click="handleDelete(row)"
          class="delete"
          v-hasC="{
            name: 'v1-doctor-list-delete',
            flag: 'v1/doctor/list/delete',
          }"
          >删除</a
        >
      </template>
    </Table>
    <Page
      :total="total"
      class="ivu-mt-16"
      v-model="params.page"
      :page-size="params.pageSize"
      :page-size-opts="pageOpts"
      @on-change="formSize"
      show-total
      show-elevator
      show-sizer
      @on-page-size-change="formChangePage"
    />
    <Modal
      :title="add ? '新增' : '编辑'"
      width="1180"
      v-model="articleModal"
      :mask-closable="false"
      :draggable="true"
      footer-hide
    >
      <doctor
        ref="doctorChange"
        @refresh="refreshData"
        :editorType="add"
        :articleModal="articleModal"
        :doctorInfo="doctorInfo"
      />
      <div slot="footer" class="modalFoot">
        <Button @click="canceledit()">取消</Button>
        <Button type="primary" @click="sendData" class="ivu-ml-16">确定</Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import { doctorList, delDoctor } from "@/api/jzy.js"
import doctor from '@/components/admin/doctor'
export default {
  name: 'nameList',
  components: { doctor },
  data () {
    return {
      editorType: true,
      add: true,
      total: 0,
      articleModal: false,
      current: 1,
      pageOpts: [10, 15, 20, 30, 50],
      params: {
        page: 1,
        pageSize: 10,
        name: '',
        type: '',
        leave_type: '',
        sort_column: '',
        sort_value: ''
      },
      columns: [
        // {
        //     type: 'selection',
        //     width: 60
        // },
        {
          title: 'id',
          key: 'id',
          width: 65
        },
        {
          title: '姓名',
          key: 'name',
          width: 118
        },
        {
          title: '门诊类型',
          tooltip:true,
          slot: 'type',
          width: 95
        },
        {
          title: '所属医院',
          key: 'hospital_name',
          minWidth: 168
        },
        {
          title: '科室',
          key: 'clinic_name',
          tooltip:true,
          width: 150
        },
        // {
        //     title: '坐诊科室',
        //     key: 'weekends',
        //     width: 108
        // },
        {
          title: '职称',
          key: 'profession_name',
          width: 108,
          tooltip: true
        },
        {
          title: '挂号类型',
          slot: 'registerType',
          width: 108
        },
        {
          title: '挂号费用',
          key: 'register_money',
          width: 105
        },
        {
          title: '排序',
          key: 'sort',
          width: 80,
          sortable: 'custom'
        },
        {
          title: '状态',
          slot: 'status',
          width: 95
        },
        {
          title: '创建时间',
          key: 'created_at',
          width: 180,
          sortable: 'custom'
        },
        {
          title: '操作',
          slot: 'action',
          width: 118,
          fixed: 'right'
        }
      ],
      doctorInfo: {},
      list: [],
      loading: false,
      leaveType: {},
      doctorType: {}
    }
  },
  methods: {
    askData () {
      this.params.page=1
      this.getData()
    },
    getData () {
      const params = this.params
      this.loading = true
      doctorList(params).then(res => {
        this.list = res.list
        this.total = res.total
        this.leaveType = res.condition.leave_type
        this.doctorType = res.condition.type

      }).finally(() => {
        this.loading = false
      })
    },
    refreshData (e) {
      this.articleModal = e
      this.getData()
    },
    sendData () {
      this.$refs.doctorChange.saveData()
    },
    canceledit () {
      this.articleModal = false
    },
    sortChange (e) {
      this.params.sort_column = e.key
      this.params.sort_value = e.order
      this.getData()
    },
    formSize (e) {
      this.params.page = e
      this.current = e
      this.getData()
    },
    formChangePage (e) {
      this.params.pageSize = e
      this.getData()
    },
    handleAdd () {
      this.add = true
      this.articleModal = true
      this.doctorInfo = {}
    },
    handleEdit (e) {
      this.add = false
      this.articleModal = true
      this.doctorInfo = e
    },
    handleDelete (e) {
      this.$Modal.confirm({
        title: '温馨提示',
        content: '确定删除此项?',
        onOk: () => {
          delDoctor({ id: e.id }).then(res => {
            this.askData()
          })
        }
      })
    }

  },
  mounted () {
    this.getData()
  }
}
</script>
<style lang='less' scoped>
.delete {
  color: rgb(226, 5, 5);
}
.modalFoot {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 16px;
  margin-top: 24px;
}
</style>
